<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div class="card-deck-wrapper">
        <div class="card-deck">
          <div class="flex-row no-gutters">
             <div class="col-md-2 col-sm-6 mb-sm-1" style="min-width: 265px;" v-for="(item,index) in crud.data" :key="index">
               <div class="card">
                 <div class="card-content">
                   <a style="color: #000000" @click="goDetails(item)">
                     <img style="height: 240px;" class="card-img-top img-fluid" alt="Card image cap" :src="require('../img/'+item.plat+'.jpg')"/>
                     <div class="card-body" style="width: 100%;height: 240px;">
                     <h4 class="card-title" style="width: 100%;height: 40px;overflow : hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;font-family: 黑体;">{{item.activityName}}</h4>
                     <p class="text-muted" style="width: 100%;height: 42px;font-size: 14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">
                         {{item.jianjie}}
                     </p>
                     <small class="text-muted" style="height:40px;font-size:12px;width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;">{{toPercent(item.shengyuEdu,item.orderEdu)}}</small>
                     <p class="text-muted" style="margin-bottom: 30px;font-size: 5px;width:100%;margin-top:10px">活动时间：{{item.startTime}}  至  {{item.endTime}}</p></div>
                   </a>
                   <div class="contai-c">
                     <button type="button" class="btn btn-primary glow mr-1 mb-1" style="padding: 0.4rem 1rem;" @click="goSubment(item)">跳转链接</button>
                   </div>
                 </div>
               </div>
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import crudActivity from '@/api/activity/activity'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null, activityName: null, plat: null, atype: null, zhouqi: null, startTime: null, endTime: null, lastUpdateTime: null, jianjie: null, shuoming: null, mianImg: null, img1: null, mianUrl: null, orderUrl: null, hide: null, hideUrl: null, createTime: null, orderEdu: null, shengyuEdu: null, ftype: null, rate: null, ramt: null, ishow: '1', showUid: null }
export default {
  name: 'activityTags',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['yn'],

  cruds() {
    return CRUD({ title: 'activity', url: 'api/activity', idField: 'id',query:{ishow:'1'}, sort: 'id,desc', crudMethod: { ...crudActivity }})
  },
  data() {
    return {

    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },

    //跳转详情
    goDetails(item){
      this.$router.push({path:'/activity/activity/activityDetails',query:{id_card:item.id}});
    },

    //跳转详情
    imgurl(item){
      return "../img/"+item.plat+".jpg";
    },

    //跳转链接
    goSubment(item){
      if (typeof item.mianUrl === 'undefined' || item.mianUrl === null || item.mianUrl === '') {
        this.$router.push({path:'/activity/activity/activityDetails',query:{id_card:item.id}});
      }else {
        window.location.href = item.hideUrl;
      }
    },

    //获取百分比
    toPercent(num, total) {
      let nums = num?num/100:0;
      let totals = total?total/100:0;
      if(totals>0){
        return (Math.round(nums / totals * 10000) / 100.00 + "%");// 小数点后两位百分比
      }else{
        return '0%';
      }
    },

  }
}
</script>

<style scoped lang="scss">
  *, *::before, *::after{
    box-sizing: border-box;
  }
  html body p{
    line-height: 1.5rem;
  }
  p{
    margin-top: 0;
    margin-bottom: 1rem;
  }
  img{
  vertical-align: middle;
  border-style: none;
  }
  .flex-row{
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
.card-deck-wrapper{
  .card-deck{
    display: flex;
    flex-direction: column;
    .card{
      margin-right: 0rem !important;
      margin-bottom: 0.75rem;
    }
  }
  .no-gutters{
    margin-right: 0;
    margin-left: 0;
  }
  .no-gutters > .col, .no-gutters > [class*="col-"]{
    padding-right: 0;
    padding-left: 0;
  }
  .card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #FFFFFF;
    background-clip: border-box;
    border: 0px solid #dfe3e7;
    border-radius: 0.267rem;
    margin-bottom: 2.2rem;
    box-shadow: -8px 12px 18px 0 rgb(25 42 70 / 13%);
    transition: all .3s ease-in-out;
    .card-title{
      font-weight: normal;
      letter-spacing: 0.05rem;
      font-size: 1.1rem;
      margin-bottom: 1.2rem;
      text-transform: capitalize;
      margin-top: 0;
    }

  }
  .contai-c{
    text-align: right;
    cursor: pointer;
  }
  .card-img-top{
    width: 100%;
    border-top-left-radius: calc(0.267rem - 0px);
    border-top-right-radius: calc(0.267rem - 0px);
  }
  .img-fluid{
    max-width: 100%;
    height: auto;
  }
  .card-body{
    flex: 1 1 auto;
    padding: 1.7rem;
  }
  .text-muted{
    color: #828D99 !important;
  }
  .small, .small{
    font-size: 80%;
    font-weight: 400;
  }
  .btn-primary.glow{
    cursor: pointer;
    box-shadow: 0 2px 4px 0 rgb(90 141 238 / 50%) !important
  }
  .mb-1, .my-1{
    margin-bottom: 1rem !important;
    margin-right: 1rem !important;
  }
  .btn{
    font-size: 12px !important;
    display: inline-block;
    font-weight: 400;
    color: #727E8C;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 0 solid transparent;
    padding: 0.467rem 1.5rem;
    line-height: 1.6rem;
    border-radius: 0.267rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .btn-primary{
    border-color: #2c6de9 !important;
    background-color: #5A8DEE !important;
    color: #fff;
  }

  @media (min-width: 576px){
    .card-deck{
      flex-flow: row wrap;
      margin-right: -0.75rem;
      margin-left: -0.75rem;
      .card{
        display: flex;
        flex: 1 0 0%;
        flex-direction: column;
        margin-right: 0.75rem;
        margin-bottom: 0;
        margin-left: 0.75rem;
      }
    }
    .mb-sm-1, .my-sm-1{
       margin-bottom: 1rem !important;
    }
    .col-sm-6{
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
  @media (min-width: 576px){
    .col-md-2{
      flex: 0 0 16.66667%;
      max-width: 16.66667%;
    }
  }
}
</style>
